<template>
  <view class="card-info">
    <view class="card-info_avatar">
      <TImage :src="detail?.avatar" width="328rpx" height="410rpx" :preview="true" error-img-type="person" />
    </view>
    <view class="card-info_item">
      <view class="personal">
        <view class="name">{{ detail?.name }}</view>
        <view class="position">{{ detail?.socialPosition }}</view>
        <template v-if="detail?.companyName">
          <view class="line"></view>
          <view class="company-name text-overflow-2">{{ detail.companyName }}</view>
        </template>
      </view>
      <view class="company-info">
        <!-- detail?.mobileDisplay &&  -->
        <view
          v-if="getCompanyTel"
          class="company-tel"
          @click="makePhoneCall(getCompanyTel)"
        >
          <text>{{ getCompanyTel }}</text>
          <image class="company-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-5.png" mode="scaleToFill" />
        </view>
        <view
          v-if="detail?.companyAddress"
          @click="openLocation(detail?.companyAddress)"
          class="company-address"
        >
          <text class="text-overflow-2">
            {{ parseAddress(detail.companyAddress)?.address }}
          </text>
          <image class="company-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-6.png" mode="scaleToFill" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type PersonalCardDetailsResult } from '@/api/card/types';
  import TImage from '@/components/TImage/index.vue';
  import { computed, type PropType } from 'vue';
  import { useLocation } from '@/hooks/core/useLocation';
  import { isLogin } from '@/utils/is';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  import { copyTextIsHide } from '../../components/utils';

  const props = defineProps({
    detail: Object as PropType<PersonalCardDetailsResult>,
  });

  const { parseAddress, openLocation } = useLocation();

  const useUser = useUserStoreWithOut();
  const { userInfo } = storeToRefs(useUser);
  const emit = defineEmits(['refresh']);

  const getCompanyTel = computed(() => props.detail?.phone);

  /** 拨打电话 */
  function makePhoneCall(phoneNumber?: string) {
    if (userInfo.value.phonenumber) {
      if (phoneNumber && !copyTextIsHide(phoneNumber)) {
        uni.makePhoneCall({ phoneNumber });
      }
    } else {
      isLogin(() => emit('refresh'));
    }
  }
</script>

<style scoped lang="scss">
  .card-info {
    height: 380rpx;
    background: linear-gradient(140deg, #f4efbd 0%, #fffae9 85%);
    box-shadow: 4rpx 4rpx 8rpx 0px rgba(0, 0, 0, 0.15);
    border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    &_avatar {
      width: 328rpx;
      margin-right: 20rpx;
      background-color: #fff;
      flex-shrink: 0;
    }
    &_item {
      text-align: right;
      flex: 1;
      margin-right: 30rpx;
      height: inherit;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .personal {
        color: #333;
        font-size: 23rpx;
        margin-top: 30rpx;
        .name {
          font-size: 38rpx;
          color: #313b31;
          font-weight: bolder;
        }
        .line {
          height: 1px;
          background-color: #858585;
          margin: 12rpx 0;
        }
      }
      .company-info {
        margin-bottom: 30rpx;
        color: #767676;
        font-size: 23rpx;
        .company-icon {
          width: 27rpx;
          height: 27rpx;
          margin-left: 12rpx;
          flex-shrink: 0;
        }
        .company-address {
          margin-top: 15rpx;
        }
        .company-tel,
        .company-address {
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }
</style>
